<template>
  <Page>
    <DataTable url="application/list" ref="ds" pageable>
        <template #tools="table">
          <Button  icon="jeicon-add" color="primary" @click="add">新增</Button>
        </template>
        <template #search="table">
          <Input type="text" v-model="table.params.name" placeholder="名称"/>
          <Input type="text" v-model="table.params.memo" placeholder="说明"/>
        </template>
        <template #default="table">
          <Table :datas="table.data" :loading="table.loading" @trDblClick="edit" @select="selected" checkbox>
            <TableItem title="序号" prop="$serial" :width="50"></TableItem>
            <TableItem title="名称" prop="name"></TableItem>
            <TableItem title="说明" prop="memo"></TableItem>
            <TableItem title="使用模型" prop="mode"></TableItem>
            <TableItem title="应用密钥" prop="appKey" :width="200"></TableItem>
            <TableItem title="是否启用" :width="80" align="center">
              <template #default="{data}">
                <Checkbox :checked="data.enable"></Checkbox>
              </template>
            </TableItem>
            <TableItem title="" :width="220">
              <template #default="{data}">
                <LinkButtons>
                  <Button @click="edit(data)">编辑</Button>
                  <Button @click="editFunction(data)">功能编辑</Button>
                  <Poptip content="确定删除所选记录？"
                          @confirm="del(data.id)">
                    <Button icon="h-icon-trash" >删除</Button>
                  </Poptip>
                </LinkButtons>
              </template>
            </TableItem>
          </Table>
        </template>
      </DataTable>
  </Page>
  <Page href="ai/function.vue" name="#fun"/>
  <Dialog href="ai/applicationDialog.vue" ref="dlg"  type="drawer-right" hasDivider hasCloseIcon>
    <template #header>AI应用</template>
    <template #footer="dlg">
      <Button @click="dlg.cancel">取消</Button>
      <Button :loading="dlg.loading" color="primary" @click="dlg.submit">确认</Button>
    </template>
  </Dialog>
</template>
<script setup>
import {ajax, util, hasPermission, format} from 'framework'
import {ref} from 'vue'
import {useRouter} from 'vue-router'

const router=useRouter()

//数据集
const ds = ref({})
const showSearch = ref(false), selects = ref([]);
//对话框的引用,可通过dlg.value.ref获取页面的引用
const dlg = ref({})

function search() {
  selects.value = []
  ds.value.reload()
}


async function add() {
  await dlg.value.open()
  search()
}

function editFunction(v){
  router.push({hash:'#fun',query:{app:v.id}})
}

async function edit(v) {

  await dlg.value.open(util.fields(v, 'id'))
  search()
}

async function del(id) {

  await ajax.post('application/delete',[id])
  search()
}
</script>
